import React, { useState, useEffect } from 'react';
import { NavBar, List, Badge, Popup, Toast } from 'antd-mobile';
import { CheckShieldOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { getUserInfo } from '../utils/auth';
import styles from './Myprivacy.module.css';
import styles2 from '../may/My.module.css';

function Myinfo() {
    const navigate = useNavigate();
    const [userInfo, setUserInfo] = useState<any>(null);
    const [isLogoutModalVisible, setIsLogoutModalVisible] = useState(false); // 新增状态
    const back = () => {
        navigate(-1);
    };
    useEffect(() => {
        // 获取用户信息
        const user = getUserInfo();
        setUserInfo(user);
    }, []);

    // 处理退出登录
    const handleLogout = async () => {
        try {
            // 如果有后端登出接口，调用这里
            // await axios.post('/api/logout');

            // 清除本地存储
            localStorage.removeItem('userInfo');
            localStorage.removeItem('userAvatar');

            // 更新状态
            setUserInfo(null);

            // 跳转登录页
            navigate('/login');

            // 显示提示
            Toast.show({ content: '退出登录成功' });
        } catch (error) {
            console.error('退出登录失败:', error);
            Toast.show({ content: '退出登录失败，请重试' });
        } finally {
            setIsLogoutModalVisible(false);
        }
    };

    return (
        <div className={styles.container}>
            {/* 校园风格装饰元素 */}
            <div className={styles.decoration1}></div>
            <div className={styles.decoration2}></div>
            <div className={styles.decoration3}></div>

            <NavBar onBack={back}>设置与隐私</NavBar>

            {/* 第一组 */}
            <div className={styles.cardGroup}>
                <List>
                    <List.Item onClick={() => { navigate('/renlian') }}>我的信息</List.Item>
                    <List.Item onClick={() => { }}>青少年守护</List.Item>
                </List>
            </div>

            {/* 第二组 */}
            <div className={styles.cardGroup}>
                <List>
                    <List.Item onClick={() => { }}>通用</List.Item>
                    <List.Item
                        onClick={() => { }}
                        extra={<Badge color="danger" content=" " style={{ marginRight: 8 }} />}
                    >
                        新消息通知
                    </List.Item>
                    <List.Item onClick={() => { }}>外观与布局</List.Item>
                    <List.Item onClick={() => { }}>个性装扮</List.Item>
                    <List.Item onClick={() => navigate('/set-gesture')}>手势密码</List.Item>
                    <List.Item onClick={() => navigate('/set-passphrase')}>语音口令</List.Item>
                </List>
            </div>

            {/* 底部安全中心 */}
            <div className={styles.cardGroupLast}>
                <List>
                    <List.Item
                        prefix={<CheckShieldOutline className={styles.securityIcon} />}
                        extra={<span className={styles.securityStatus}>已保护</span>}
                        onClick={() => { }}
                    >
                        安全中心
                    </List.Item>
                </List>
            </div>
            <div className={styles.cardGroupLast}>
                <List>
                    <List.Item
                        className={styles.logoutCenterRed}
                        onClick={() => setIsLogoutModalVisible((e) => !e)}
                    >
                        退出登录
                    </List.Item>
                </List>
            </div>
            {/* 新增底部弹窗 */}
            <Popup
                visible={isLogoutModalVisible}
                onMaskClick={() => setIsLogoutModalVisible(false)}
                position="bottom"
                bodyStyle={{
                    borderTopLeftRadius: '20px',
                    borderTopRightRadius: '20px',
                    padding: '0',
                    background: 'transparent'
                }}
                maskStyle={{
                    backgroundColor: 'rgba(0, 0, 0, 0.4)',
                    backdropFilter: 'blur(4px)'
                }}
            >
                <div className={styles2.logoutModal}>
                    <div className={styles2.modalTitle}></div>
                    <div className={styles2.modalContent}>
                        <div className={styles2.modalItem}
                            onClick={() => {
                                handleLogout();
                            }}
                        >
                            退出登录
                        </div>
                        <div className={styles2.modalDivider}></div>
                        <div className={styles2.modalItem}
                            onClick={() => setIsLogoutModalVisible(false)}
                        >
                            取消
                        </div>
                    </div>
                </div>
            </Popup>
        </div>
    );
}

export default Myinfo;